<template>
    <!-- 日历 -->
    <div class="main">
      <div>
        <div>点击按钮后，日历中选择日期设置</div>
        <div>
          <el-button size="medium" @click="btnClick" type="primary">{{clickDefin ? '选择日期' : '确定'}}</el-button>
        </div>
      </div>
      <div :class="['bottom-calendar', clickDefin ? 'disableHover' : '']">
        <vue-quick-calendar 
            showPrepNext 
            weekColor="none" 
            :markDate="markDate" 
            :checkedDate="nowDay" 
            @clickDate="clickDate" 
            @changeMonth="changeMonth" />
      </div>
    </div>
  </template>
  
  <script>
  import vueQuickCalendar from 'vue-quick-calendar'
  
  export default {
    name:'DatePicker',
    data() {
      return {
        clickDefin: true,
        markDate: [], //需要标记的日期数组
        markMonth: this.timeFormate(new Date())[1],
        nowDay: this.timeFormate(new Date())[0],
      };
    },
    components: { vueQuickCalendar },
    methods: {
      // 点击日期
      clickDate(date) {
        if (this.clickDefin) return
        let tempData = this.timeFormate(date)[0]
        if (this.timeComparison(this.nowDay, tempData)) {
          let index = this.markDate.indexOf(tempData)
          if (index == -1) {
            this.markDate.push(tempData)
          } else {
            this.markDate.splice(index, 1)
          }
        } else {
          this.$message({ message: '不能选择之前的日期！', type: 'warning' })
        }
      },
      // 切换月份
      changeMonth(date) {
        this.markMonth = this.timeFormate(date)[1]
        let nowTempDay = this.timeFormate(date)[0]
        if (!this.clickDefin) {
          this.saveMark()
        }
        this.getMark(nowTempDay)
      },
      // 获取当前月份的所有被选中日期
      getMark(date) {
        // monList({declareDate: date}).then( res => {
        //   this.markDate = res.data
        // })
        // 取后端保存的当月数据
        this.markDate = []
      },
      btnClick() {
        if (!this.clickDefin) {
          this.$confirm('您确定提交这些日期吗？', {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.clickDefin = true
            this.saveMark()
          })
        } else {
          this.clickDefin = !this.clickDefin
        }
      },
      // 修改日历 保存数据
      saveMark() {
        // 调接口保存当月数据
        // calendarSave({monList: this.markDate, declareDate: this.markMonth}).then( () => {})
        console.log(this.markDate, this.markMonth);
      },
      // 时间格式化
      timeFormate(tempTime) {
        let day2 = new Date(tempTime)
        let Y = day2.getFullYear()
        Y = Y < 10 ? '0' + Y : Y
        let M = day2.getMonth() + 1
        M = M < 10 ? '0' + M : M
        let D = day2.getDate()
        D = D < 10 ? '0' + D : D
        let h = day2.getHours()
        h = h < 10 ? '0' + h : h
        let i = day2.getMinutes()
        i = i < 10 ? '0' + i : i
        let s = day2.getSeconds()
        s = s < 10 ? '0' + s : s
        let w = day2.getDay()
        let s1 = Y + "-" + M + "-" + D
        let s2 = Y + "-" + M
        let s3 = h + ":" + i
        return [s1, s2, s3, w]
      },
      //比较时间
      timeComparison(begintime, endtime) {
        let startTime = new Date(begintime).getTime()
        let endTime = new Date(endtime).getTime()
        return endTime > startTime
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .main {
    position: relative;
    .bottom-calendar {
      position: relative;
      // width: 90%;
      margin: 10px auto;
      background-color: #fff;
      // 样式穿透用 >>> 或 /deep/ 或 ::v-deep
      >>> .pc-vue-quick-calendar {
        // border: none;
        header {
          padding: 30px 0 20px 0;
          border: none;
          h1 {
            font-size: 18px;
          }
        }
        .dates {
          padding: 0 10% 30px 10%;
          font-size: 18px !important;
          justify-content: space-around;
        }
        .day {
          color: #909090;
        }
        .day:hover {
          background: #9aeaf9;
        }
        ul li::after {
          width: 0;
          height: 0;
        }
        ul li.weeks,
        ul li.day {
          font-size: inherit;
          height: 35px !important;
          width: 10% !important;
          margin: 6px 1.6%;
        }
        .isSelected {
          background: inherit;
        }
        li.day.isWeekend {
          cursor: pointer;
          opacity: 1;
        }
        li.day.isPrep,
        li.day.isNext {
          opacity: 0.3;
          cursor: pointer;
        }
        li.day.isMarked {
          color: #fff;
          background: #1890ff;
        }
        li.day.isMarked::after {
          background: inherit;
        }
      }
    }
    .bottom-calendar.disableHover {
      >>> .pc-vue-quick-calendar {
        li.day:hover,
        li.weeks:hover {
          background-color: inherit;
          cursor: default;
        }
        li.day.isMarked:hover {
          color: #fff;
          background: #1890ff;
        }
      }
    }
  }
  </style>
  